import { Fragment,  useContext } from 'react'
import { Button, Col, Form, Input, Row, Select } from 'antd';
import { Context } from '../../App';

const options = [
  { value: "1", label: "大一上" },
  { value: "2", label: "大一下" },
  { value: "3", label: "大二上" },
  { value: "4", label: "大二下" },
  { value: "5", label: "大三上" },
  { value: "6", label: "大三下" },
  { value: "7", label: "大四上" },
  { value: "8", label: "大四下" },
]
export default function TrainingPlanSearch({ onFinish }) {
  const [form] = Form.useForm();
  const { role } = useContext(Context);

  return (
    <Fragment>
      <Form
        form={form}
        name="advanced_search"
        onFinish={onFinish}
        size="small"
      >
        <Row gutter={32} >
          <Col span={4}>
            <Form.Item
              name="semester"
              label="学期"
            >
              <Select
                listHeight={90}
                style={{ width: 130 }}
                key="value"
                showSearch
                filterOption={(input, option) =>
                  (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                }
                options={options}
              />
            </Form.Item>
          </Col>
          <Col span={5}>
            <Form.Item
              name="curriculumName"
              label="课程名称"
            >
              <Input></Input>
            </Form.Item>
          </Col>
          {
            role.fd_type === "teacher" ?
              <Col span={4}>
                <Form.Item
                  name="professionalName"
                  label="专业"
                >
                  <Input></Input>
                </Form.Item>
              </Col> : ""
          }
          <Col span={5}>
            <Form.Item
              name="type"
              label="课程类别"
            >
              <Select
                listHeight={90}
                style={{ width: 130 }}
                key="value"
                options={[
                  { value: "1", label: "必修" },
                  { value: "2", label: "选修" }
                ]}
              />
            </Form.Item>
          </Col>
          <Col className="trainingPlan-sea-but" span={3}>
            <Form.Item>
              <Button htmlType="submit">检索</Button>
              <Button onClick={() => {
                form.resetFields();
                onFinish();
              }}>重置</Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Fragment>
  )
}
